<template>
  <div id="app">
    <side-bar>
      <side-bar-item :link="profile">
        <div>个人资料</div>
      </side-bar-item>
      <side-bar-item link="/category">
        <div>博客分类</div>
      </side-bar-item>
      <side-bar-item link="/collect">
        <div>我的收藏</div>
      </side-bar-item>
      <side-bar-item link="/fans">
        <div>粉丝列表</div>
      </side-bar-item>
      <side-bar-item link="/setting">
        <div>账号设置</div>
      </side-bar-item>
    </side-bar>
    <div id="show-box">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
  import SideBar from "./components/sidebar/SideBar";
  import SideBarItem from "./components/sidebar/SideBarItem";

  export default {
    name: "App",
    data() {
      return {
        profile: "/profile"
      }
    },
    components: {
      SideBarItem,
      SideBar
    }
  }
</script>

<style>
  /* 引入全局样式 */
  @import "assets/css/global.css";

  #app {
    display: flex;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  #show-box {
    width: 300px;
    height: 240px;
    border: red 1px solid;
  }
</style>
